<template>
	<view class="ys">
		<view class="numlist">
			<view class="numitem ">
				<view class="num orange">
					2<text>户</text>
				</view>
				<view class="text">
					今日成交
				</view>
			</view>
			<view class="numitem ">
				<view class="num green">
					2<text>户</text>
				</view>
				<view class="text">
					本月待缴租
				</view>
			</view>
			<view class="numitem ">
				<view class="num blue">
					2<text>户</text>
				</view>
				<view class="text">
					即将到期合同
				</view>
			</view>
		</view>
		<view class="title">
			主要业务
		</view>
		<view class="mlist">
			<view class="mitem">
				<view class="text">
					房源管理
				</view>
				<view class="icon">
					<i class="iconfont icon-fangyuanchaxun"></i>
				</view>
			</view>
			<view class="mitem">
				<view class="text">
					住户开卡
				</view>
				<view class="icon">
					<i class="iconfont icon-cangkuguanli"></i>
				</view>
			</view>
			<view class="mitem">
				<view class="text">
					实施监控
				</view>
				<view class="icon">
					<i class="iconfont icon-header-14"></i>
				</view>
			</view>
			<view class="mitem">
				<view class="text">
					合同管理
				</view>
				<view class="icon">
					<i class="iconfont icon-hetong"></i>
				</view>
			</view>
		</view>
		<view class="adbox">
			<image src="/static/img/ad.png" mode="widthFix"></image>
		</view>
		<view class="title">
			其他业务
		</view>
		<view class="servelist">
			<view class="sitem" v-for="(item,index) in serveList" :key="index" @click="toPage(item.url)">
				<i class="iconfont" :class="item.icon"></i>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serveList: [{
						text: '收费管理',
						icon: 'icon-shoufeiguanli',
						url: ''
					},
					{
						text: '门禁记录',
						icon: 'icon-menjindukaqi',
						url: ''
					},
					{
						text: '设备维修',
						icon: 'icon-weixiuzhong',
						url: ''
					},
					{
						text: '房屋推广',
						icon: 'icon-house-full',
						url: ''
					},
					{
						text: '客服中心',
						icon: 'icon-kefu',
						url: ''
					},
					{
						text: '帮助中心',
						icon: 'icon-bangzhu',
						url: '/pages/help/index'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.numlist {
		background: #fff;
		border-radius: 5px;
		padding: 20px 10px;
		box-sizing: border-box;
		width: 96%;
		margin: 0 auto;
		display: flex;

		.numitem {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			border-right: 1px solid #E6E6E6;

			&:last-child {
				border-right: 0;
			}

			.num {
				font-size: 20px;
				letter-spacing: 1px;
				font-weight: bold;

				text {
					font-weight: normal;
					font-size: 13px;
				}
			}

			.text {
				margin-top: 5px;
			}
		}
	}

	.title {
		padding: 0 2%;
		font-weight: bold;
		margin-top: 10px;
	}

	.mlist {
		display: flex;
		padding: 0 2%;
		margin-top: 10px;
		justify-content: space-between;

		.mitem {
			width: 23%;
			padding: 25px 5px 10px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: rgba(252, 121, 65, 0.15);
			font-size: 15px;
			color: rgba(252, 121, 65, 1);
			border-radius: 5px;
			text-align: center;

			i {
				font-size: 40px;
			}

			.icon {
				text-align: right;
				margin-top: 15px;
			}

			&:nth-child(2) {
				background: rgba(67, 207, 124, 0.15);
				color: rgba(67, 207, 124, 1);
			}

			&:nth-child(3) {
				background: rgba(121, 72, 234, 0.15);
				color: rgba(121, 72, 234, 1);
			}

			&:nth-child(4) {
				background: rgba(42, 130, 228, 0.15);
				color: rgba(42, 130, 228, 1);
			}
		}
	}

	.adbox {
		padding: 10px 2%;

		image {
			width: 100%;
		}
	}

	.servelist {
		display: flex;
		background: #fff;
		background: #fff;
		border-radius: 5px;
		padding: 20px 10px 0;
		box-sizing: border-box;
		width: 96%;
		margin: 0 auto;
		flex-wrap: wrap;
		margin-top: 10px;

		.sitem {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			width: 25%;
			margin-bottom: 20px;

			i {
				color: #FC7941;
				font-size: 30px;
				margin-bottom: 5px;
			}
		}

	}
</style>